<template>
  <div>
    <el-card class="box-card margin_30">
      <div slot="header" class="clearfix">
        <el-button type="primary" size="small" @click="dialogVisible = true,isAdd = true">新增</el-button>
      </div>
      <div>
        <el-table
          :data="adList"
          border
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            fixed="left"
            width="50"
            align="center"
          />
          <el-table-column
            label="广告图片"
            align="center"
            width="250"
          >
            <template v-slot="scope">
              <img style="width:100px;height:100px" :src="scope.row.pic" alt="">
            </template>
          </el-table-column>
          <el-table-column
            label="时间"
            align="center"
            width="200"
          >

            <template slot-scope="scope">
              <p>开始时间:{{ scope.row.startTime }}</p>
              <p>结束时间:{{ scope.row.endTime }}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="广告名称"
            width="300"
            align="center"
            prop="name"
          />
          <el-table-column
            label="点击数"
            align="center"
            width="200"
            prop="clickCount"
          />
          <el-table-column
            label="下单数"
            align="center"
            width="200"
            prop="orderCount"
          />
          <el-table-column
            label="轮播位置"
            align="center"
            width="200"
            prop="type"
          />
          <el-table-column
            label="链接地址"
            align="center"
            width="200"
            prop="url"
          />
          <el-table-column
            label="备注"
            align="center"
            width="200"
            prop="note"
          />
          <el-table-column
            label="上下线状态"
            align="center"
            width="200"
            prop="status"
          />
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="upAd(scope.row)">编辑</el-link>
              <el-link type="danger" @click="delAd(scope.row.id)">删除</el-link>
            </template>

          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog
      title="广告详情"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form :model="adInfo" :inline="true" size="mini">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="广告名称">
              <el-input v-model="adInfo.name" placeholder="" size="mini" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="备注">
              <el-input v-model="adInfo.note" placeholder="" size="mini" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="排序">
              <el-input v-model="adInfo.sort" placeholder="" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="产品数量">

              <el-input v-model="adInfo.orderCount" placeholder="" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="链接">
              <el-input v-model="adInfo.url" placeholder="" size="mini" clearable />

            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="首页轮播位置">
              <el-select v-model="adInfo.type " value-key="" placeholder="" clearable filterable>
                <el-option
                  label="app首页轮播"
                  value="0"
                />
                <el-option
                  label="1"
                  value="1"
                />
              </el-select>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="adInfo.startTime "
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="adInfo.endTime "
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="上下线状态">
              <el-switch v-model="adInfo.status" :active-value="true" :inactive-value="false" />

            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="图片">
              <el-upload
                class="avatar-uploader"
                action="http://leju.bufan.cloud/lejuAdmin/material/uploadFileOss"
                :headers="getToken"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="adInfo.pic" style="width:200px;height:200px" :src="adInfo.pic" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { adsList, addAds, updateAds, delAds } from '@/api/marketing/advertisementList/index'
import { getToken } from '@/utils/myAuth'
export default {
  name: 'VueAdminTemplateMasterIndex',

  data() {
    return {
      isAdd: '',
      getToken: {
        token: getToken()
      },
      dialogVisible: false,
      adList: [],
      adInfo: {
        'clickCount': 0,
        'createTime': '',
        'endTime': '',
        'id': '',
        'modifyTime': '',
        'name': '',
        'note': '',
        'orderCount': 0,
        'pic': '',
        'productId': '',
        'sort': 0,
        'startTime': '',
        'status': 0,
        'type': 0,
        'url': ''
      }
    }
  },

  created() {
    this.init()
  },

  mounted() {

  },

  methods: {
    delAd(id) {
      delAds(id).then(res => {
        this.init()
      })
    },
    upAd(e) {
      console.log(e)
      e.status = !!e.status
      if (e.type === '首页轮播') {
        e.type = '0'
      } else {
        e.type = '1'
      }
      this.adInfo = e
      this.dialogVisible = true
      this.isAdd = false
    },
    addAd() {
      if (this.isAdd) {
        this.adInfo.status = this.adInfo.status ? 1 : 0
        console.log(this.adInfo)
        addAds(this.adInfo).then(res => {
          this.init()
        })
      } else {
        this.adInfo.status = this.adInfo.status ? 1 : 0
        console.log(this.adInfo)
        updateAds(this.adInfo).then(res => {
          this.dialogVisible = false
          this.init()
        })
      }
    },
    handleAvatarSuccess(e) {
      console.log(e)
      this.adInfo.pic = e.data.fileUrl
    },
    init() {
      adsList().then(res => {
        res.data.items.forEach(ele => {
          ele.status = ele.status ? '上线' : '下线'
          ele.type = ele.type ? '其他' : '首页轮播'
        })
        this.adList = res.data.items
      })
    }
  }
}
</script>

<style scoped>

</style>
